<script type="text/x-template" id="poster-row">
    <div>
        <el-card class = "img-list" v-for="row in data">
            <div class="img-info">
                <span class="img-title">相似度: {{ row.score }}</span>
            </div>
<#--            <el-carousel :interval="4000" type="card" height="300px">-->
<#--                <el-carousel-item v-for="url in  row.posters" :key="url">-->
<#--                    <div class="left-img">-->
<#--                        <img referrerpolicy="no-referrer" :key="url" :src="url"/>-->
<#--                    </div>-->
<#--                </el-carousel-item>-->
<#--            </el-carousel>-->
<#--            <el-image v-for="url in  row.posters" :key="url" :src="url" lazy></el-image>-->
            <div class="img-item">
                <div class="left-img" v-for="(poster, index) in row.posters">
<#--                    <img referrerpolicy="no-referrer" :src="url"/>-->
                    <el-image
                            :src="poster.data"
                            fit="scale-down"></el-image>
                    <div class="img-info">
                        <span class="img-title">{{ poster.id }}</span>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</script>

<script>
    Vue.component('poster-row', {
        template: '#poster-row',
        props:['data'],
        data: function () {
            return {
                posterDialogVisible: false,
                posterUrlList: [],
                posterLabelUrlList: [],
                searchForm: {},
                pagination: {},
                selected: [],
                selectionType: 'multiple',
                urls: {
                    //分页数据接口
                    pageList: '/v1/aiPoster/pageList.html',
                    queryOriginPoster: '/v1/aiPoster/queryOriginPoster.html',
                },
                loading: true,
                picDialogVisible: false, // 预览图片弹出框
                reviewPicUrl: null,
                tableLoading: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                POSTER_TYPE_DICT:{
                    0:'原始图',
                    1:'裁剪图',
                    2:'增强图'
                }
            };
        },
        created: function () {
           console.log(JSON.stringify(this.data))
        },
        methods: {
            convertRemark(remark){
                if (remark == undefined || remark == ''){
                    return remark
                }
                var data = remark.split(",")
                return data
            },
            resetForm() {
                this.$refs.searchForm.resetFields();
                this.page.currentPage = 1
                this.page.pageSize = 10
            },
            reviewPic(row) {
                this.reviewPicUrl = row.poster_url
                this.picDialogVisible = true
            },
            reviewOriginPic(row){
                if (row.poster_type == 0){
                    this.reviewPicUrl = row.poster_url
                    this.picDialogVisible = true
                }else {
                    this.ajax(this.urls.queryOriginPoster, {id : this.id, poster_name: row.poster_name}
                        , function (data) {
                            if (data.code === '0') {
                                this.reviewPicUrl = data.data.poster_url
                                this.picDialogVisible = true
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));
                }
            },
            download(row) {
                imgSrc=row.poster_url
//                var image = new Image();
//                // 解决跨域 Canvas 污染问题
//                image.setAttribute("crossOrigin", "anonymous");
//                image.onload = function() {
//                    var canvas = document.createElement("canvas");
//                    canvas.width = image.width;
//                    canvas.height = image.height;
//                    var context = canvas.getContext("2d");
//                    context.drawImage(image, 0, 0, image.width, image.height);
//                    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
//
//                    var a = document.createElement("a"); // 生成一个a元素
//                    var event = new MouseEvent("click"); // 创建一个单击事件
//                    var name = imgSrc.substring(imgSrc.lastIndexOf('/') + 1)
//                    a.download = name || "photo"; // 设置图片名称
//                    a.href = url; // 将生成的URL设置为a.href属性
//                    a.dispatchEvent(event); // 触发a的单击事件
//                };
//                image.src = imgSrc;

                const a = document.createElement('a')
                var filename = imgSrc.substring(imgSrc.lastIndexOf('/') + 1)
                a.download = filename
                a.style.display = 'none'
                a.href = imgSrc
                document.body.appendChild(a)
                a.click()
                a.remove()
                window.URL.revokeObjectURL(imgSrc)
            },
            reviewRlsPoster(row) {
                this.posterUrlList = row.poster_list
                this.posterLabelUrlList = row.poster_label_value_list
                this.posterDialogVisible = true
            },
            handleSearch: function (searchForm) {
                this.searchForm = searchForm;
                this.tableLoading = true;
                var searchParams = this.getSearchParams(searchForm);
                searchParams.page = this.page.currentPage;
                searchParams.rows = this.page.pageSize;
                this.ajax(this.urls.pageList, searchParams
                    , function (data) {
                        if (data.code === '0') {
                            this.tableData = data.data.rows
                            this.page.total = data.data.total
                            this.tableLoading = false
                        } else {
                            this.tableData = [];
                            this.tableLoading = false;
                        }
                    }.bind(this));
            },
            handleRefresh() {

            },
            handleRowSelectionAdd() {

            },
            handleRowSelectionRemove() {

            },

        }
        ,
        mounted: function () {

        }
    })
</script>

<style>
    .pics img {
        max-width: 560px;
        max-height: 322px;
    }

    .img-list {
        width: 1360px;
        overflow-x: auto;
    }

    .img-list .img-item {
        position: relative;
        width: 1360px;
        height: 322px;
        border: 1px solid #ccc;
        margin: 0 10px 10px 0;
        overflow-x: auto;
    }
    .img-list .img-item .left-img{
        position: relative;
        float: left;
        width: 560px;
        height: 317px;
        border: 1px solid #ccc;
        margin: 0 40px 10px 0;
    }

    .img-list .img-item img {
        max-width: 100%;
        max-height: 100%;
    }

    .img-list .img-item .img-detail {
        /*position: absolute;*/
        /*bottom: 20px;*/
        /*text-align: center;*/
        /*opacity: 0.8;*/
        /*background: #f5f5f5;*/
        /*width: 100%;*/
        /*display: none;*/
        position: absolute;
        left: 260px;
        width: 100%;
        top:5px

    }

    .img-list .img-item .img-detail span {
        display: block;
    }

    /*.img-list .img-item:hover .img-detail {*/
    /*display: block;*/
    /*}*/

    .img-list .img-item .img-info {
        position: absolute;
        bottom: 0;
        height: 38px;
        width: 100%;
        background: #000;
        color: #fff;
        opacity: 0.8;
    }

    .img-list .img-item .img-title {
        display: inline-block;
        overflow: hidden;
        width: 130px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .img-list .img-item .img-preview {
        position: absolute;
        bottom: 25px;
        left: 10px;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .img-list .img-item .img-origin-preview {
        position: absolute;
        bottom: 25px;
        left: 170px;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .img-list .img-item .img-rls-preview {
        position: absolute;
        top: 5px;
        left: 210px;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .remark{
        margin-left: 30px;
    }

</style>